<template>
	<view class="replent-container" @click="hideDropdown">
		<view class="feature" v-if="deviceInfo.goods_status !== 1">
			<view class="fast-search"  @click.stop>
				<input 
					type="text" 
					@focus="showAllProducts"
					@input="getShopList"
					@blur="handleInputBlur"
					@touchstart="handleTouchStart"
					@touchend="handleTouchEnd"
					v-model.trim="searchKey" 
					placeholder="点击选择商品添加"
					readonly
				/>
				<view @click="scanCode" class="sub-button" style="padding-left: 30rpx; padding-right: 30rpx;">
					<uni-icons type="scan" size="40"></uni-icons>
				</view>
				<!-- 商品下拉列表 -->
				<view class="product-dropdown" v-if="showDropdown">
					<scroll-view scroll-y style="max-height: 400rpx">
						<view 
							v-for="item in shopList" 
							:key="item.id"
							class="dropdown-item"
							@click="selectProduct(item)"
						>
						<image 
							class="dropdown-img" 
							:src="item.banner" 
							mode="aspectFit"
						></image>
							{{ item.data }}
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- <view v-if="proModule" class="fast-supplier" @click="fastSupplier">快捷补货</view> -->
		</view>

		<view class="replent-products" v-if="deviceInfo.goods_status == 1">
			<view class="replent-title">
				<text>本次补货</text>
			</view>
			<view class="replent-not" v-if="deviceInfo.goods == 0">未补充任何商品！</view>
			<view class="replent-list" v-else>
				<view class="products-wrap" v-for="(items, index) in deviceInfo.goods" :key="items.id">
					<view class="products-text">
						<view class="products-img">
							<image :src="items.banner" mode="scaleToFill"></image>
						</view>
						<view class="products-name">
							{{ items.name }}
						</view>
						<view class="amount">
							<text class="amount-data">x{{ items.num }}</text>
							件
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="counter-replent" v-if="deviceInfo.goods_status == 0">
			<view class="product-list">
				<view class="product-module" v-for="(itemx, index) in proModule" :key="itemx.id">
					<view class="module-box">
						<image class="product-img" :src="itemx.banner" mode="scaleToFill"></image>
						<view class="product-title">
							<view class="name">
								{{ itemx.name }}
							</view>
							<view class="stock-amount">
								库存:
								<text class="stock-text">{{ itemx.num }}</text>
							</view>
							<view class="stock-amount" style="display: flex; align-items: center;">
								价格:
								<input 
									type="digit"
									v-model="itemx.price" 
									placeholder="请输入价格" 
									@blur="itemPriceBlur(itemx)"
									@confirm="itemPriceBlur(itemx)"
									style="border: 1px solid #8f8d8d; border-radius: 10rpx; padding: 5rpx 10rpx; margin-left: 5px; width: 150rpx;"
								/>
							</view>
							<view class="reduce-box" :class="itemx.change != 0 ? 'reduce-to' : ''">
								{{ itemx.change < 0 ? '库存' : '补充' }}:
								<text class="reduce-amount">{{ itemx.change }}</text>
								件
							</view>
						</view>

						<view class="module-btn">
							<view class="reduce-btn" @click="changeNum(index, -1)">-</view>
							<input type="number" class="input-amount" placeholder="0" @blur="inputNum(index, itemx.change)" v-model="itemx.change" />
							<view class="add-btn" @click="changeNum(index, +1)">+</view>
						</view>
					</view>
				</view>
			</view>
			<view class="spead"></view>

			<view class="submit">
				<view class="fast" @click="fastSupplier">一键补货</view>
				<view class="normal" @click="submitReplenish">提交补货</view>
			</view>
		</view>

		<uni-popup ref="cofirmPopup" type="center">
			<view class="cofirm-title">确认提交</view>
			<scroll-view class="cofirm-popup" scroll-y>
				<view class="product-module" v-for="(itemx, index) in subProductArr" :key="itemx.id">
					<view class="module-box">
						<image class="product-img" :src="itemx.banner" mode="scaleToFill"></image>
						<view class="product-title">
							<view class="name">
								{{ itemx.name }}
							</view>
							<view class="stock-amount">
								库存:
								<text class="stock-text">{{ itemx.num }}</text>
							</view>
							<view class="stock-amount">
								价格:
								<text class="stock-text">{{ itemx.price }}</text>
							</view>
							<view class="reduce-box" :class="itemx.change != 0 ? 'reduce-to' : ''">
								{{ itemx.change < 0 ? '库存' : '补充' }}:
								<text class="reduce-amount">{{ itemx.change }}</text>
								件
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="comfirm-submit">
				<view class="cancel" @click="closeCofirmPopup">修改</view>
				<view v-if="!isSubmitting" class="comfirm" @click="OnSubmit(subProductArr)">确认提交</view>
				<view v-else class="loading-animation">
					<uni-icons type="spinner-cycle" size="20" color="#fff"></uni-icons>
					提交中...
				</view>
			</view>
		</uni-popup>
	</view>

	<!-- :is-mask-click="false" -->
	<uni-popup ref="addPopup" type="center">
		<view v-if="selectedProduct" style="background-color: #fff; padding: 30rpx; border-radius: 20rpx; width: 80vw; transform: translateY(-50px);">
			<view class="popup-header">
				<text>{{ flag ? '修改商品' : '添加商品' }}</text>
			</view>
			<view class="popup-content">
				<view style="display: flex; width: 100%;">
					<image style="margin-right: 10px;" class="product-img" :src="selectedProduct?.banner" mode="aspectFit"></image>
					<view class="product-name">
						<view style="margin-bottom: 8px;">
							<text>{{ selectedProduct?.data }}</text>
						</view>
						<view style="display: flex; margin-bottom: 8px">
							<view style="width: 100px; display: flex; justify-content: center; align-items: center;">价格：</view>
							<input 
								type="digit"
								v-model="selectedProduct.price" 
								@focus="priceFocus()"
								@blur="priceBlur()"
								placeholder="请输入价格" 
								style="border: 1px solid #eee; padding: 10rpx;"
							/>
						</view>
						<view style="display: flex;">
							<view style="width: 100px; display: flex; justify-content: center; align-items: center;">库存：</view>
							<input 
								type="number" 
								v-model="selectedProduct.num"
								@focus="numFocus()"
								@blur="numBlur()"
								placeholder="请输入库存" 
								style="border: 1px solid #eee; padding: 10rpx;"
							/>
						</view>
					</view>
				</view>
			</view>
			<view class="popup-footer">
				<button @click="addPopup.close()" class="cancel-btn">取消</button>
				<button @click="confirmAddProduct" class="confirm-btn">{{ flag ? '确认修改' : '确认添加' }}</button>
			</view>
		</view>
	</uni-popup>

	<uni-popup ref="errorPopup" type="center">
		<view class="error">
			<view class="bgc">
				<image src="/static/images/error.png" mode="widthFix"></image>
				<view class="text">{{ statusText }}</view>
			</view>
		</view>
	</uni-popup>

	<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
</template>

<script setup>
import { computed, ref } from 'vue';
import { uniFetch } from '../../api/uni-fetch';

const props = defineProps(['id']);
const searchKey = ref('');
// 新增状态
const showDropdown = ref(false)
const selectedProduct = ref(null)

// 新增触摸状态
const touchStartTime = ref(0)
const isIntentionalTouch = ref(false)
function handleTouchStart() {
  touchStartTime.value = Date.now()
  isIntentionalTouch.value = true
}
function handleTouchEnd() {
  const touchDuration = Date.now() - touchStartTime.value
  // 如果触摸时间很短(小于300ms)，认为是点击而不是滚动
  isIntentionalTouch.value = touchDuration < 300

	// 添加点击外部关闭逻辑
  setTimeout(() => {
    if(!isIntentionalTouch.value && showDropdown.value) {
      showDropdown.value = false
    }
  }, 100)
}

function handleInputBlur() {
  setTimeout(() => {
    if(!isIntentionalTouch.value) {
      showDropdown.value = false
    }
  }, 200)
}

function hideDropdown() {
  showDropdown.value = false;
}

const shopList = ref([]);
async function getShopList (val) {
	const res = await uniFetch.post('/device/get-all-goods', {
		query: searchKey.value
	});
	if (res.data.length === 0) {
		shopList.value = [];
		uni.showToast({
			title: '暂无商品',
			icon: 'none'
		})
	} else {
		shopList.value = res.data;
		if (!showDropdown.value && val) {
			showDropdown.value = true
		}
	}
}
getShopList()

// 列表价格修改
async function itemPriceBlur(item, val = true) {
	await uniFetch.post('/supplier/update-goods-price', {
		goods_id: item.id,
		device_id: deviceInfo.value.device_id,
		price: item.price,
	});
	if (val) {
		uni.showToast({
			title: '价格修改成功',
			icon: 'none'
		})
	}
}
// 添加商品 价格与库存
function priceFocus() {
	if (selectedProduct.value.price == 0) {
		selectedProduct.value.price = null;
	}
}
function priceBlur() {
	if (!selectedProduct.value.price) {
		selectedProduct.value.price = 0;
	}
}
function numFocus() {
	if (selectedProduct.value.num == 0) {
		selectedProduct.value.num = null;
	}	
}
function numBlur() {
	if (!selectedProduct.value.num) {
		selectedProduct.value.num = 0;
	}
}

// 显示所有商品
function showAllProducts() {
  showDropdown.value = true
}

// 选择商品
const addPopup = ref(null)
async function selectProduct(val) {
	const isExit = await uniFetch.post('/supplier/is-duplicate', {
		goods_id: val.id,
		device_id: deviceInfo.value.device_id,
	})
	// 修改
	if (isExit.data == true) {
		flag.value = true

		isIntentionalTouch.value = false // 重置触摸状态
		showDropdown.value = false

		const obj = proModule.value.find(item => item.id === val.id)
		selectedProduct.value = {...val, num:  obj.num || 0, price: obj.price || 0}
		addPopup.value.open('center')
		return
	} else {
		flag.value = false

		isIntentionalTouch.value = false // 重置触摸状态
		selectedProduct.value = {...val, num:  val.num || 0, price: val.price || 0,}
		showDropdown.value = false
		addPopup.value.open('center')
	}
}

const flag = ref(false)
function scanCode() {
  uni.hideKeyboard();

	setTimeout(() => {
		uni.scanCode({
			onlyFromCamera: true,
			scanType: ['barCode', 'qrCode'],
			success: (res) => {
				uniFetch.post('/device/get-all-goods', {
					query: res.result
				}).then(async res => {
					if (res.data.length === 0) {
						uni.showToast({
							title: '暂无商品',
							icon: 'none'
						})
					} else {
						// 存在赛选数据  补货赛选逻辑
						const isExit = await uniFetch.post('/supplier/is-duplicate', {
							goods_id: res.data[0].id,
							device_id: deviceInfo.value.device_id,
						})
						if (isExit.data == true) {
							flag.value = true
							const obj = proModule.value.find(item => item.id === res.data[0].id)
							
							selectedProduct.value = {...res.data[0], num:  obj.num || 0, price: obj.price || 0}
							addPopup.value.open('center')
							return
						} else { 
							// 新增
							flag.value = false
							selectedProduct.value = {...res.data[0], num:  res.data[0].num || 0, price: res.data[0].price || 0}
							addPopup.value.open('center')
						}
					}
				})
			},
			fail: (err) => {
				if(err.errMsg === 'scanCode:fail cancel') {
					// 用户主动取消扫码，不需要提示
					return
				}
				uni.showToast({
					title: '扫码失败',
					icon: 'none'
				})
			}
		})
	}, 300)
}

async function confirmAddProduct() {
	// true 修改  false 新增
	if (flag.value == true) {
		if (selectedProduct.value.price > 0) {
			// 价格修改
			itemPriceBlur(selectedProduct.value, false)
			// 库存修改 列表更新
			const obj = proModule.value.find(item => item.id === selectedProduct.value.id)
			obj.change = selectedProduct.value.num - obj.num
			obj.num2 = Number(selectedProduct.value.num)
			obj.price = Number(selectedProduct.value.price)

			// 列表更新
			proModule.value.forEach(item => {
				if (item.id === selectedProduct.value.id) {
					item.change = obj.change;
					item.num2 = obj.num2;
					item.price = obj.price;
				}
			});

			addPopup.value.close()
			selectedProduct.value = null
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			})
		} else {
			uni.showToast({
				title: '请输入正确价格',
				icon: 'none'
			})
		}
	} else {
		if (selectedProduct.value.price > 0) {
			await uniFetch.post('/device/add-template-goods', {
				deviceId: deviceInfo.value.device_id,
				goodsId: selectedProduct.value.id,
				stock: selectedProduct.value.num,
				price: selectedProduct.value.price,
			})
			// 接口调用
			addPopup.value.close()
			selectedProduct.value = null
			uni.showToast({
				title: '添加成功',
				icon: 'none'
			})
			await getStock()
		} else {
			uni.showToast({
				title: '请输入正确价格',
				icon: 'none'
			})
		}
	}
}

const deviceInfo = ref({});
const errorPopup = ref(null);
const statusText = ref('');
const timer = ref(null);
async function getSupplier() {
	const res = await uniFetch.post('/supplier/detail', {
		id: props.id
	});
	if (res.code === 10000) {
		deviceInfo.value = res.data;
		if (res.data.goods_status == 0) {
			getStock();
		}
	} else {
		errorPopup.value.open('center');
		statusText.value = res.msg;
		timer.value = setTimeout(() => {
			uni.redirectTo({
				url: '/pages/index/index'
			});
		}, 1500);
	}
}
getSupplier();

const proModule = ref([]);
async function getStock() {
	const res = await uniFetch.post('/device/stock-all', { deviceId: deviceInfo.value.device_id });
	if (res.code === 10000) {
		// 保留已修改的change值
    const currentChanges = {};
    proModule.value.forEach(item => {
			if (item.change != 0) {
				currentChanges[item.id] = {
					change: item.change
				}
			}
    });
    // 更新数据并保留修改
    proModule.value = res.data.map(item => {
			const savedValues = currentChanges[item.id]?.change || 0
      return {
        ...item,
        change: savedValues,
				num2: Number(item.num) + savedValues
      };
    });
	} else {
		errorPopup.value.open('center');
		timer.value = setTimeout(() => {
			errorPopup.value.close();
		}, 1500);
	}
}

function changeNum(index, num) {
	proModule.value[index].change = Number(proModule.value[index].change) + num;
	proModule.value[index].num2 = Number(proModule.value[index].change) + Number(proModule.value[index].num);
}
function inputNum(index, num) {
	proModule.value[index].change = Number(num);
	proModule.value[index].num2 = Number(num) + Number(proModule.value[index].num);
}

const subProductArr = computed(() => {
	const arr = [];
	proModule.value.filter((item) => {
		item.change !== 0 ? arr.push(item) : arr;
	});
	return arr;
});

function closeCofirmPopup() {
	cofirmPopup.value.close();
}
const cofirmPopup = ref(null);
async function submitReplenish() {
    try {
        const modalRes = await uni.showModal({
            title: '上传图片',
            content: '请拍摄柜体整体的清晰图片，方便异常订单时客服人员核对使用',
            confirmText: '上传'
        });

        if (!modalRes.confirm) {
            throw new Error('用户取消了图片上传');
        }

        const chooseRes = await uni.chooseImage({
            count: 1,
            mediaType: ['image']
        });
        const imgUrl = chooseRes.tempFilePaths[0];

        await uni.uploadFile({
            url: 'https://dmg.nex-i.cn/v2/supplier/upload-pic',
            // url: 'https://front.gamekingtao.top/v2/supplier/upload-pic',
            filePath: imgUrl,
            name: 'device_pic',
            header: {
                'token': uni.getStorageSync('userLoginCode').token
            },
            formData: {
                device_id: deviceInfo.value.device_id
            },
						success: async(res) => {
							if (subProductArr.value.length) {
								await OnSubmit(subProductArr.value);
								// cofirmPopup.value.open('center');
							} else {
								const submitRes = await uni.showModal({
										content: '您未补充任何商品',
										confirmText: '提交补货',
										cancelText: '返回修改'
								});
								if (submitRes.confirm) {
									await OnSubmit(subProductArr.value);
								}
							}
						},
						fail: (err) => {
							console.error('图片上传失败:', err);
						}
        });
    } catch (err) {
			console.error('提交补货失败:', err);
    }
}

const isSubmitting = ref(false);
async function OnSubmit(goods) {
	isSubmitting.value = true;
	const res = await uniFetch.post('/supplier/supply', { id: props.id, goods: goods });
	
	cofirmPopup.value.close();
	if (res.code === 10000) {
		uni.showToast({
			icon: 'none',
			title: '提交成功'
		});
		proModule.value = [];
		getSupplier();
		isSubmitting.value = false;
	} else {
		uni.showToast({
			icon: 'none',
			title: res.msg
		});
		isSubmitting.value = false;
	}
}

async function fastSupplier() {
	const res = await uniFetch.post('/device/supplier', { deviceId: deviceInfo.value.device_id });
	// console.log(res.data.length);
	if (res.code === 10000) {
		if (res.data.every((item) => item.supplier_number === 0)) {
			return uni.showToast({
				icon: 'error',
				title: '暂无补货建议'
			});
		}
		res.data.forEach((item) => {
			if (item.supplier_number !== 0) {
				proModule.value.forEach((items) => {
					if (items.id == item.id) {
						items.change = Number(item.supplier_number);
						items.num2 = Number(item.supplier_number) + Number(items.num);
					}
				});
			}
		});
		cofirmPopup.value.open('center');
	} else {
		uni.showToast({
			icon: 'error',
			title: res.msg
		});
	}
}

</script>

<style lang="scss" scope>
view {
	box-sizing: border-box;
}
.popup-header {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}
.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}
.product-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}
.product-name {
	flex: 1;
  font-size: 32rpx;
  margin-bottom: 30rpx;
}
.price-input {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  width: 100%;
}
.popup-footer {
  display: flex;
  justify-content: space-between;
}
.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
  width: 45%;
}
.confirm-btn {
  background-color: #2d8cf0;
  color: #fff;
  width: 45%;
}
.replent-container {
	min-height: 100vh;
	background-color: #f2f2f0;
	padding: 20rpx 0;
}
.cofirm-title {
	background-color: #ebf6ff;
	font-size: 35rpx;
	line-height: 90rpx;
	border-bottom: 2rpx solid #acd9ff;
	border-radius: 26rpx 26rpx 0 0;
	height: 90rpx;
	text-align: center;
}
.cofirm-popup {
	background-color: #fff;
	width: 90vw;
	max-height: 60vh;
	.product-module {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 0 auto 20rpx;
		padding: 10rpx 10rpx;
		border-bottom: 1px solid #e4eeff;
		border-radius: 10rpx;
		background: #fff;
		box-sizing: border-box;
		width: 100%;

		.module-box {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			// height: 100rpx;
			.product-img {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
			}

			.product-title {
				width: 70%;
				.name {
					width: 100%;
					height: 55rpx;
					font-size: 37rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					box-sizing: border-box;
				}
				.stock-amount {
					text-align: left;
					font-size: 31rpx;
					.stock-text {
						color: #072ac8;
						font-size: 33rpx;
					}
				}
				.reduce-box {
					font-size: 33rpx;
					opacity: 0;
					.reduce-amount {
						color: #f56a00;
						white-space: 1em;
					}
				}
				.reduce-to {
					opacity: 1;
				}
			}

			.module-btn {
				width: 210rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				height: 70rpx;
				position: absolute;
				right: 0;
				bottom: 0;
				// overflow: hidden;

				.reduce-btn {
					width: 69rpx;
					height: 70rpx;
					background: #4cd964;
					color: #fff;
					text-align: center;
					font-size: 55rpx;
					line-height: 66rpx;
					border-radius: 29rpx 0 0 29rpx;
				}

				.input-amount {
					width: 60rpx;
					height: 66rpx;
					border-top: 1rpx solid #c1c6e1;
					border-bottom: 1rpx solid #c1c6e1;
					text-align: center;
					background: #fff;
					padding: 0 10rpx;
				}

				.add-btn {
					width: 69rpx;
					height: 70rpx;
					line-height: 66rpx;
					background: #1890ff;
					color: #fff;
					text-align: center;
					font-size: 55rpx;
					border-radius: 0 29rpx 29rpx 0;
				}
			}
		}

		.stock {
			height: 100rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			padding: 0 20rpx;

			.product-prices {
				width: 200rpx;
				text-align: left;
				position: absolute;
				font-size: 25rpx;
				top: 130rpx;
				left: 40rpx;

				.prices-icon {
					color: #d264b6;
					font-size: 22rpx;
				}

				.prices-money {
					color: #ff499e;
					font-size: 25rpx;
				}
			}

			.stock-amount {
				width: 200rpx;
				text-align: left;
				font-size: 25rpx;
				position: absolute;
				top: 130rpx;
				left: 200rpx;

				.stock-text {
					color: #072ac8;
					font-size: 25rpx;
				}
			}

			.reduce-stock {
				width: 170rpx;
				text-align: left;
				color: #ffad03;
				position: absolute;
				top: 60rpx;
				left: 110rpx;

				.reduce-box {
					font-size: 25rpx;
					opacity: 0;
					.reduce-amount {
						color: #f56a00;
					}
				}

				.reduce-amounts {
					font-size: 28rpx;
					color: #f50;
				}
				.reduce-to {
					opacity: 1;
				}
			}
		}
	}
}
.comfirm-submit {
	display: flex;
	background-color: #fff;
	border-radius: 0 0 26rpx 26rpx;
	text-align: center;
	font-size: 35rpx;
	height: 100rpx;
	line-height: 100rpx;
	.cancel {
		background-color: #e3e3e3;
		color: #343434;
		flex: 1;
	}
	.comfirm {
		background-color: #2d2f8c;
		color: #fff;
		flex: 1;
	}
	.loading-animation {
		background-color: #2d2f8c;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
}

.replent-order {
	width: 680rpx;
	padding: 20rpx;
	margin: 0 auto;
	box-sizing: border-box;
	background: #fff;
	border: 5rpx solid #0f51ccaa;
	border-radius: 30rpx;
	box-shadow: 0 0 5px 0px #0c0cccaa;
	color: #000;
	view {
		margin-bottom: 20rpx;
	}
}

.feature {
	padding: 0 20rpx 0 0;
	margin: 20rpx auto 20rpx;
	// padding-bottom: 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	width: 680rpx;
	border-radius: 20rpx;

	.fast-search {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 15rpx 20rpx 20rpx;
		border-radius: 10rpx;
		width: 680rpx;

		input {
			flex: 1;
			height: 75rpx;
			border: 1rpx solid #e3e3e3;
			background-color: #fff;
			border-radius: 60rpx;
			padding-left: 20rpx;
		}
		.sub-button {
			margin-left: 10rpx;
			z-index: 1000;
		}
		.product-dropdown {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background: #fff;
			border: 1px solid #eee;
			border-radius: 8rpx;
			z-index: 100;
			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
			
			.dropdown-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				&:active {
					background-color: #f5f5f5;
				}
			}

			.dropdown-img {
				width: 50rpx;
				height: 50rpx;
				margin-right: 15rpx;
				border-radius: 8rpx;
			}
		}
	}

	.fast-supplier {
		margin: 10rpx auto 0;
		padding: 20rpx;
		border-radius: 10rpx;
		border: 5rpx solid #fff;
		width: 600rpx;
		border-radius: 20rpx;
		// box-shadow: 0 0 5px 0px #c0c0c0;
		box-sizing: border-box;
		text-align: center;
		font-size: 36rpx;
		// background-color: #fa8760;
		color: #fff;
		font-weight: 600;
	}
}

.replent-products {
	margin: 0 auto;
	margin-top: 20rpx;

	.replent-title {
		padding: 0 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #3069ca;

		text {
			border-bottom: 5px solid #3069ca;
			padding-bottom: 10rpx;
		}
	}

	.replent-not {
		margin-top: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.replent-list {
		margin-top: 20rpx;

		.products-wrap {
			margin: 0 auto;
			width: 690rpx;
			margin: 0 auto;
		}
	}
}

// 补货的状态

.counter-replent {
	.spead {
		width: 690rpx;
		height: 130rpx;
	}
}

.product-list {
	padding: 10rpx;
	width: 690rpx;
	margin: 0 auto;
	margin-bottom: 150rpx;
	display: flex;
	// align-items: start;
	flex-wrap: wrap;

	.product-module {
		position: relative;
		width: 100%;
		// height: 180rpx;
		padding: 10rpx 10rpx;
		border: 1px solid #fff;
		border-radius: 10rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: #fff;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 5px 0px #c0c0c0;

		.module-box {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			// height: 100rpx;

			.product-img {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
			}

			.product-title {
				width: 70%;
				.name {
					width: 100%;
					height: 55rpx;
					font-size: 37rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					box-sizing: border-box;
				}
				.stock-amount {
					text-align: left;
					font-size: 31rpx;
					.stock-text {
						color: #072ac8;
						font-size: 33rpx;
					}
				}
				.reduce-box {
					font-size: 33rpx;
					opacity: 0;
					.reduce-amount {
						color: #f56a00;
						white-space: 1em;
					}
				}
				.reduce-to {
					opacity: 1;
				}
			}

			.module-btn {
				width: 210rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				height: 70rpx;
				position: absolute;
				right: 0;
				bottom: 0;
				// overflow: hidden;

				.reduce-btn {
					width: 69rpx;
					height: 70rpx;
					background: #4cd964;
					color: #fff;
					text-align: center;
					font-size: 55rpx;
					line-height: 66rpx;
					border-radius: 29rpx 0 0 29rpx;
				}

				.input-amount {
					width: 60rpx;
					height: 66rpx;
					border-top: 1rpx solid #c1c6e1;
					border-bottom: 1rpx solid #c1c6e1;
					text-align: center;
					background: #fff;
					padding: 0 10rpx;
				}

				.add-btn {
					width: 69rpx;
					height: 70rpx;
					line-height: 66rpx;
					background: #1890ff;
					color: #fff;
					text-align: center;
					font-size: 55rpx;
					border-radius: 0 29rpx 29rpx 0;
				}
			}
		}

		.stock {
			height: 100rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			padding: 0 20rpx;

			.product-prices {
				width: 200rpx;
				text-align: left;
				position: absolute;
				font-size: 25rpx;
				top: 130rpx;
				left: 40rpx;

				.prices-icon {
					color: #d264b6;
					font-size: 22rpx;
				}

				.prices-money {
					color: #ff499e;
					font-size: 25rpx;
				}
			}

			.stock-amount {
				width: 200rpx;
				text-align: left;
				font-size: 25rpx;
				position: absolute;
				top: 130rpx;
				left: 200rpx;

				.stock-text {
					color: #072ac8;
					font-size: 25rpx;
				}
			}

			.reduce-stock {
				width: 170rpx;
				text-align: left;
				color: #ffad03;
				position: absolute;
				top: 60rpx;
				left: 110rpx;

				.reduce-box {
					font-size: 25rpx;
					opacity: 0;
					.reduce-amount {
						color: #f56a00;
					}
				}

				.reduce-amounts {
					font-size: 28rpx;
					color: #f50;
				}
				.reduce-to {
					opacity: 1;
				}
			}
		}
	}
}

//
.products-img {
	image {
		width: 100rpx;
		height: 100rpx;
	}
}

.products-text {
	height: 150rpx;
	background: #fff;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-radius: 3px;
	padding: 20rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	box-shadow: 0 0 5px 0px #c0c0c0;

	.products-img {
		image {
			height: 100rpx;
			width: 100rpx;
		}
	}

	.products-name {
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 32rpx;
	}

	.amount {
		color: #fc164d;
	}
}

.submit {
	position: fixed;
	z-index: 5;
	left: 50%;
	bottom: 20rpx;
	display: flex;
	margin-left: -300rpx;
	margin-bottom: 100rpx;
	line-height: 100rpx;
	text-align: center;
	border-radius: 20rpx;
	width: 600rpx;
	height: 100rpx;
	color: #fff;

	.fast {
		flex: 1;
		background-image: linear-gradient(135deg, #1353ca 10%, #3069ca 100%);
		border-radius: 50rpx 0 0 50rpx;
	}

	.normal {
		flex: 1;
		background-image: linear-gradient(135deg, #f0060a 10%, #be040a 100%);
		border-radius: 0 50rpx 50rpx 0;
	}
}

.submit-single {
	width: 600rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	color: #fff;
	border-radius: 20rpx;
	// position: fixed;
	// left: 50%;
	// margin-left: -300rpx;
	margin: 0 auto;
	// z-index: 5;
	background-image: linear-gradient(135deg, #f0060a 10%, #be040a 100%);
}

.go-on {
	width: 600rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	color: #1d1d1d;
	border-radius: 20rpx;
	// position: fixed;
	// left: 50%;
	// margin-left: -300rpx;
	// z-index: 5;
	margin: 0 auto;
	background-image: linear-gradient(135deg, #f0f0f0 10%, #bebebe 100%);
}

.error .bgc {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #000000ee;
	width: 350rpx;
	height: 350rpx;
	border-radius: 30rpx;
	image {
		width: 150rpx;
		height: 150rpx;
	}
	.text {
		padding-top: 30rpx;
		color: #fff;
		font-size: 35rpx;
		text-align: center;
	}
}
</style>
